<script setup>
import MenuList from "@/components/MenuList.vue";
import HeaderContent from "./components/HeaderContent.vue";
import {ref, reactive} from 'vue'
import { getSysInfos } from "./api/api.js"
import useStore from './store/index'

const store = useStore()

const info = reactive({
    mqtt_id: "",
    mqtt_ip: "",
    mqtt_state: false,
    mqtt_port: 0,
    server_ip:"",
    server_port:0,
    color: "",
    msg: "",
})

const getSystemInfo = () => {
    getSysInfos().then(function (response) {
        var is_connected = false
        is_connected = response.data.mqtt_state
        if (is_connected === true){
            info.color = "#2da700"
            info.msg = "MQ连接成功"
        }else{
            info.color = "#d80b00"
            info.msg = "MQ连接失败"
        }
        info.mqtt_id = response.data.mqtt_id
        info.mqtt_state = is_connected
        info.mqtt_ip = response.data.mqtt_ip
        info.mqtt_port = response.data.mqtt_port
        info.server_ip = response.data.server_ip
        info.server_port = response.data.server_port
        store.setInfo(info)
    })
    .catch(function (error) {
        console.log(error);
    })
    .finally(function () {
        // 总是会执行
    });
}
getSystemInfo()

</script>


<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <HeaderContent :info="info"/>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <MenuList />
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style>
.header {
    height: 50px;
    border-radius: 3px;
    margin-bottom: 5px;
}
</style>